<template>
  <!---底部菜单--->
  <div class="tabbar_headert">
    <van-tabbar route class="taber">
      <van-tabbar-item
        replace
        :to="item.url"
        v-for="(item,index) in tabbarList"
        :key="index"
        :icon="item.icon"
        fixed="true"
        z-index="1"
        active-color="red"
      >{{item.name}}</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: "Tabber",
  data () {
    return {
      tabbarList: [
        {name:'首页',url:'/home',icon:'home-o'},
        {name:'专题',url:'/special',icon:'home-o'},
        {name:'分类',url:'/classify',icon:'home-o'},
        {name:'购物车',url:'/shopCat',icon:'home-o'},
        {name:'个人中心',url:'/personal',icon:'home-o'}]
    }
  }
}
</script>

<style scoped>
.taber{
  height:55px;
  position:fixed;
  bottom:0px;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}
</style>
